<template>
    <div id="destoryChart"></div>
</template>
<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
const props = defineProps({
  data: {
    required: true,
    type: Array,
    default: [],
  },
});
const { data } = toRefs(props);
onMounted(()=>{
  watch(()=>props.data,()=>{
    let twoString=''
    data.value?.forEach((v,i)=>{
      if(v.breakResultsType=='4'){
        twoString=v.breakResultsProportion
      }
    })
     // 初始化echarts
     let myChart = echarts.init(
        document.getElementById("destoryChart")
      );
      let option = {
        title: {
          // 标题
          text: (twoString * 1).toFixed(2) + "%",
          textStyle: {
            // 标题的样式
            color: "#FFCC5D", // 字体颜色
            fontFamily: "Microsoft YaHei", // 字体
            fontSize: 24,
            fontWeight: "bold",
            align: "center", // 文字的水平方式
            baseline: "middle",
            position: "inside",
            verticalAlign: "middle", // 文字的垂直方式
          },
          left: "center", // 定位
          top: "30%",
        },
        polar: {
          radius: ["50%", "60%"],
          center: ["50%", "50%"],
        },
        angleAxis: {
          max: 100,
          clockwise: true, //刻度增长是否按顺时针，默认顺时针(true)。
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        radiusAxis: {
          type: "category",
          show: true,
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            type: "liquidFill", //定义类型
            radius: "80%",
            center: ["50%", "50%"],
            waveAnimation: true,
            z: 1,
            data: [
              {
                value: 0.32,
                direction: "right",
                amplitude: 5, // 水波纹的振幅
                // 悬浮后的样式
                emphasis: {
                  itemStyle: {
                    opacity: 0.9,
                  },
                },
              },
            ],

            // 改变水球图的形状，比如 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'(默认为circle)
            shape: "circle",
            //水球图边框属性设定
            outline: {
              show: false,
              // borderDistance: 1, // 设置和外层轮廓的间距
              itemStyle: {
              },
            },
            color: [  //color一定要是个数组 ，每一项对应一个波浪，可以给每个波浪单独配置颜色
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(255, 209, 99,1)"
                  },
                  {
                    offset: 1,
                    color: "rgba(255, 37, 37,1)"
                  }
                ],
                globalCoord: false
              },
            ],
            // itemStyle: {
            //   opacity: 0.9, // 波浪的透明度
            //   shadowBlur: 0, // 波浪的阴影范围
            // },
            backgroundStyle: {
              // color: "rgba(255,255,255,0)", // 图表的背景颜色
              //color一定要是个数组 ，每一项对应一个波浪，可以给每个波浪单独配置颜色
              color: {
                type: "radial",
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0, 3, 45,0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(0, 12, 88,.5)",
                  },
                  {
                    offset: 0,
                    color: "rgba(0, 3, 45,1)",
                  },
                ],
                globalCoord: false,
              },
            },
            label: {
              // 数据展示样式
              show: false,
              color: "",
              insideColor: "#fff",
              fontSize: 24,
              fontWeight: 400,
              align: "center",
              baseline: "middle",
              position: "inside",
            },
          },
          //外层线
          {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["92%", "94%"], //外层线粗细
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: 100,
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: "#FFD96E"
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    color: "red"
                  }
                }
              }
            ]
          },
         
           //进度线
           {
            type: "pie",
            center: ["50%", "50%"],
            radius: ["90%", "95%"], //进度线粗细
            hoverAnimation: false,
            data: [
              {
                name: "",
                value: twoString, //进度
                labelLine: {
                  show: false
                },
                itemStyle: {
                  color: {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 2,
                    colorStops: [
                      // !! 在此添加渐变过程色 !!
                      { offset: 0, color: "#FFC03A" },
                      { offset: 1, color: "#FF2525" }
                    ]
                  }
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    // color: "red"
                  }
                }
              },
              {
                //画剩余的刻度圆环
                name: "",
                value: 100 - twoString,
                itemStyle: {
                  color: "rgba(0,0,0,0)"
                },
                label: {
                  show: false
                },
                labelLine: {
                  show: false
                },
                emphasis: {
                  labelLine: {
                    show: false
                  },
                  itemStyle: {
                    // color: "red"
                  }
                }
              }
            ]
          }
        ],

      };
      myChart.setOption(option);
      window.addEventListener('resize', function () {
        // 让我们的图表调用 resize这个方法
        myChart.resize();
      });
    },{ deep: true, immediate: true })
})
</script>
<style lang="scss" scoped>
#destoryChart{
    width: 160px;
    height: 160px;
}
</style>